<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zen-coding 过滤器</title>
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>

<body onload="prettyPrint();">
<h1>zen-coding 过滤器</h1>
<hr />
<p>Zen Coding v0.6 introduces a new concept called <i>filters</i>. Filters are special post-processors that modifies expanded abbreviation right before output to the editor. To better understand how filters works, let&#x27;s walk through a simple tutorial. </p>
<p>Go to <a href="http://zen-coding.ru/textarea/" rel="nofollow">demo page</a> and try to expand the following abbreviation: <tt>div#content&gt;p.title</tt>. As you may expect, it will be expanded into the following HTML code: </p>
<pre class="prettyprint linenums">&lt;div id=&quot;content&quot;&gt;
	&lt;p class=&quot;title&quot;&gt;&lt;/p&gt;
&lt;/div&gt;</pre>
<p>Now, try to expand this abbreviation: <tt>div#content&gt;p.title|e</tt>. You&#x27;ll have a slightly different result: </p>
<pre class="prettyprint linenums">&amp;lt;div id=&quot;content&quot;&amp;gt;
	&amp;lt;p class=&quot;title&quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;</pre>
<p>We&#x27;ve just applied &quot;e&quot; (escape) filter by appending its name after pipe character. This filter escaped all XML-unsafe symbols with entities right before ZC sent output to the editor. Now, try this one: <tt>div#content&gt;p.title|e|e</tt>: </p>
<pre class="prettyprint linenums">&amp;amp;lt;div id=&quot;content&quot;&amp;amp;gt;
	&amp;amp;lt;p class=&quot;title&quot;&amp;amp;gt;&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;</pre>
<p>We have a double-escaped code (e.g. we applied &quot;e&quot; filter twice). As you can see, we can apply as many filters to abbreviation as we want, and as many times as we want. </p>
<p>Let&#x27;s do something more interesting. Try to expand this abbreviation: <tt>div#content&gt;p.title|haml</tt> </p>
<pre class="prettyprint linenums">#content
	%p.title</pre>
<p>Isn&#x27;t it nice? We&#x27;ve just expanded abbreviation as a HAML template! </p>
<p>As you can see, filtering is a key concept of Zen Coding v0.6. They can anything: from small tweaks as placing whitespace after CSS-rule to more complex tasks as outputting result in different syntax. Even HTML output is defined as <tt>html</tt> filter. </p>
<h2><a name="Implicit_filter_call"></a>Implicit filter call<a href="#Implicit_filter_call" class="section_anchor"></a></h2>
<p>You can apply filter to abbreviation explicitly, by adding pipe character and its name right after abbreviation. But filters also can be applied implicitly, depending on document type you&#x27;re  currently edit. You don&#x27;t want to append <tt>|haml</tt> every time you expand abbreviation in HAML document, right? </p>
<p>Default filters are defined in <a href="http://github.com/sergeche/zen-coding/blob/master/javascript/zen_settings.js" rel="nofollow">zen_settings.js</a> (or .py) file in <tt>filters</tt> section of each syntax: </p>
<pre class="prettyprint linenums">zen_settings = {
	...
	&#x27;html&#x27;: {
		...
		&#x27;filters&#x27;: &#x27;html&#x27;
	}
}</pre>
<p>If there&#x27;s no such section, <tt>html</tt> filter is applied by default. If you want to apply more than one filter by default, you can write a comma- or pipe-separated list of filter names in <tt>filters</tt> section: </p>
<pre class="prettyprint linenums">zen_settings = {
	...
	&#x27;html&#x27;: {
		...
		&#x27;filters&#x27;: &#x27;html, e&#x27;
	}
}</pre>
<p>Now, every time you expand abbreviation in HTML document, <tt>html</tt> and <tt>e</tt> filters will be applied by default. </p>
<p><strong>But be careful!</strong> You always have to place one of the syntax filter—<tt>html</tt> or <tt>haml</tt>—at first place of default filters in <tt>zen_settings</tt> file, otherwise you&#x27;ll have empty output because syntax filters are defining primary output result. </p>
<h2><a name="List_of_available_filters"></a>List of available filters<a href="#List_of_available_filters" class="section_anchor"></a></h2>
<h3><a name="haml"></a>haml<a href="#haml" class="section_anchor"></a></h3>
<p>HAML syntax filter: output abbreviation as HAML template. Applies by default for HAML files. </p>
<h3><a name="html"></a>html<a href="#html" class="section_anchor"></a></h3>
<p>HTML syntax filter: output abbreviation as HTML tags. Applies by default everywhere except HAML files. </p>
<h3><a name="e"></a>e<a href="#e" class="section_anchor"></a></h3>
<p>Escapes XML-unsafe characters: <tt>&lt;</tt>, <tt>&gt;</tt> and <tt>&amp;</tt>. </p>
<p>For example, <tt>div#header|e</tt> will be expanded into <tt>&amp;lt;div id=&quot;header&quot;&amp;gt;&amp;lt;/div&amp;gt;</tt>. This filters will be extremely useful for tech bloggers/writers who wants to show code snippets on website (if you add Zen Coding support into you CMS, of course). </p>
<h3><a name="c"></a>c<a href="#c" class="section_anchor"></a></h3>
<p>Add comments around important tags. Important tags are those tags with ID and/or CLASS attribute. </p>
<pre class="prettyprint linenums">div&gt;div#page&gt;p.title+p|c</pre>
<p>will be expanded into </p>
<pre class="prettyprint linenums">&lt;div&gt;
	&lt;!-- #page --&gt;
	&lt;div id=&quot;page&quot;&gt;
		&lt;!-- .title --&gt;
		&lt;p class=&quot;title&quot;&gt;&lt;/p&gt;
		&lt;!-- /.title --&gt;
		&lt;p&gt;&lt;/p&gt;
	&lt;/div&gt;
	&lt;!-- /#page --&gt;
&lt;/div&gt;</pre>
<p> </p>
<h3><a name="fc"></a>fc<a href="#fc" class="section_anchor"></a></h3>
<p>Format CSS rule: add whitespace after CSS property name. </p>
<pre class="prettyprint linenums">fl:l|fc</pre>
<p>will be expanded into </p>
<pre class="prettyprint linenums">float: left;</pre>
<p>If you prefer this coding style, you&#x27;ll definitely want to modify <tt>zen_settings</tt> file and add this filter as default one for CSS syntax. But remember: you should add <tt>html</tt> filter first: </p>
<pre class="prettyprint linenums">zen_settings = {
	...
	&#x27;css&#x27;: {
		...
		&#x27;filters&#x27;: &#x27;html, fc&#x27;
	}
}</pre>
<h3><a name="xsl"></a>xsl<a href="#xsl" class="section_anchor"></a></h3>
<p>This filter removes <tt>select</tt> attribute from <tt>&lt;xsl:variable&gt;</tt> and <tt>&lt;xsl:with-param&gt;</tt> tags <i>if they have child nodes</i>. For example: </p>
<pre class="prettyprint linenums">ap&gt;wp</pre>
<p>will be expanded into </p>
<pre class="prettyprint linenums">&lt;xsl:apply-templates select=&quot;&quot; mode=&quot;&quot;&gt;
	&lt;xsl:with-param name=&quot;&quot; select=&quot;&quot;/&gt;
&lt;/xsl:apply-templates&gt;</pre>
<p>...but </p>
<pre class="prettyprint linenums">ap&gt;wp&gt;call</pre>
<p>will be expanded into </p>
<pre class="prettyprint linenums">&lt;xsl:apply-templates select=&quot;&quot; mode=&quot;&quot;&gt;
	&lt;xsl:with-param name=&quot;&quot;&gt;
		&lt;xsl:call-template name=&quot;&quot;/&gt;
	&lt;/xsl:with-param&gt;
&lt;/xsl:apply-templates&gt;</pre>
<p>Applies by default in XSL files. </p>
</body>
</html>
